<template>
  <div id="app">
    <h1>Phone UI Vue3 组件库演示</h1>

    <div class="warning">
      ⚠️ 下方所有机型尺寸与按钮布局均为演示效果，并非真实手机，仅供开发测试参考！
    </div>

    <div class="demo-section">
      <h2>预设机型演示</h2>
      <div class="phone-grid">
        <div class="phone-item" v-for="phoneType in phoneTypes" :key="phoneType">
          <PhoneUI :phoneType="phoneType">
            <div class="demo-app" :style="getBackgroundStyle(phoneType)">
            </div>
          </PhoneUI>
          <div class="phone-label">{{ phoneType }}</div>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h2>自定义机型演示</h2>
      <div class="phone-grid">
        <div class="phone-item" v-for="(phone, index) in coustomPhone" :key="index" >
          <PhoneUI :phoneType="phone.phoneType" :width="phone.width"
            :height="phone.height" :frameWidth="phone.frameWidth" :notchType="phone.notchType"
            :borderRadius="phone.borderRadius" :frameColor="phone.frameColor" :screenColor="phone.screenColor"
            :buttonConfig="phone.buttonConfig">
            <div class="custom-app" :style="customAppStyle">
            </div>
          </PhoneUI>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import PhoneUI from './components/PhoneUI.vue'

// 导入图片资源
import iphone16_1 from './assets/iphone16-1.jpg'
import iphone16_2 from './assets/iphone16-2.jpg'
import iphone16_3 from './assets/iphone16-3.jpg'
import iphone16_4 from './assets/iphone16-4.jpg'
import customImg from './assets/custom.jpg'

const phoneTypes = ref(['iphone16', 'iphone16plus', 'iphone16pro', 'iphone16promax'] as const)

// 图片映射
const phoneImages = {
  'iphone16': iphone16_1,
  'iphone16plus': iphone16_2,
  'iphone16pro': iphone16_3,
  'iphone16promax': iphone16_4
}

// 获取背景样式的函数
const getBackgroundStyle = (phoneType: string) => {
  return {
    backgroundImage: `url(${phoneImages[phoneType as keyof typeof phoneImages]})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    height: '100%'
  }
}

const customAppStyle = computed(() => ({
  backgroundImage: `url(${customImg})`,
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
  height: '100%'
}))
const coustomPhone = [
  {
    phoneType: 'custom',
    width: 400,
    height: 600,
    frameWidth: 10,
    notchType: '0',
    borderRadius: 30,
    frameColor: '#1a1a1a',
    screenColor: '#ffffff',
    buttonConfig: {
      left: [
        { top: 80, height: 60 },
        { top: 180, height: 60 }
      ],
      right: [
        { top: 80, height: 60 }
      ]
    }
  },
  {
    phoneType: 'custom',
    width: 400,
    height: 800,
    frameWidth: 20,
    notchType: '1',
    borderRadius: 30,
    frameColor: '#000000',
    screenColor: '#ffffff',
    buttonConfig: {
      left: [
        { top: 80, height: 60 }
      ],
      right: [
        { top: 80, height: 60 }
      ]
    }
  },
  {
    phoneType: 'custom',
    width: 400,
    height: 600,
    frameWidth: 10,
    notchType: '2',
    borderRadius: 30,
    frameColor: '#ffffff',
    screenColor: '#ffffff',
    buttonConfig: {
      left: [
        { top: 80, height: 60 },
        { top: 180, height: 60 }
      ],
      right: [
        { top: 80, height: 60 }
      ]
    }
  },
  {
    phoneType: 'custom',
    width: 350,
    height: 700,
    frameWidth: 10,
    notchType: '2',
    borderRadius: 30,
    frameColor: '#194c9f',
    screenColor: '#ffffff',
    buttonConfig: {
      left: [
        { top: 80, height: 60 },
        { top: 180, height: 60 }
      ],
      right: [
        { top: 80, height: 60 }
      ]
    }
  }
]
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-height: 100vh;
  padding-bottom: 20px;
}

.warning {
  background: #0070f3;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  margin: 20px auto;
  max-width: 600px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-section {
  margin: 20px 0;
}

.demo-section h2 {
  color: #333;
  margin-bottom: 30px;
}

.phone-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  align-items: flex-end;
}

.phone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  zoom: 0.4;
  transform-origin: center bottom;
}

.phone-label {
  margin-top: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

/* 演示应用样式 */
.demo-app {
  height: 100%;
}

/* 自定义应用样式 */
.custom-app {
  height: 100%;
}
</style>
